<template>
    <div class="footer">
    	<div class="left cc">  
            <div class="cc" :class="{active:activeClass==1}">
            	<van-icon name="shop-o"  size="24" @click="link('/')"/>首页
            </div>
    	</div>
    	
    	<div class="middle" @click="link('/market/goods/release')">
    		<div class="top">
    			<div class="yuan cc">
    				<div class="yuan2 cc">
    					<van-icon name="plus" size="26" color="#555"/>
    				</div>
    			</div>
    		</div>
    		<div class="bottom">发布</div>
    	</div>
    	
    	<div class="right">
    		<div class="cc"  :class="{active:activeClass==2}" @click="link('/market/msg/index')">
    			<van-icon name="chat-o" info="9" size="20"/>
    			消息
    		</div>
    		<div class="cc" :class="{active:activeClass==4}"><van-icon name="contact" size="20"
    			 @click="link('/market/center/index')"/>管理</div>
    	</div>	
    	
    </div> 		
</template>

<script>
import {getFun} from '@/api/publicFun.js'
let publicFun=getFun()
export default {
  name: 'footers',
  data() {
   return {
     activeClass:0
   }
  },
  methods:{

  },
  mixins:[publicFun],//混入
  mounted(){
  	let name=this.$router.currentRoute.name
  	let activeClass=0
  	if(name=='MarketIndex'){
  		this.activeClass=1
  	}else if(name=='MarketMe'){
  		this.activeClass=4
  	}else if(name=='msgIndex')  {
  		this.activeClass=2
  	} 
  }
}
</script>

<style scoped="">
.cc{display: flex;justify-content: center;align-items: center;}
.footer{height: 50px;position: fixed;background: #fff;z-index: 101;
bottom: 0;left: 0;width: 100%;display: flex;justify-content: space-between;}
.footer .left{
	width: 40%;
	display: flex;
}
.footer .left>div,.footer .right>div{width: 50%;flex-direction: column;}
.footer .right{
	width: 40%;
	display: flex;
}
.footer .middle{position: absolute;top: -30px;left: 50%;margin-left: -40px;
width: 80px;height: 80px;z-index: 100;}
.footer .middle .top{height: 70%;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;}
.footer .middle .bottom{height:30%;text-align: center;}
.yuan{height: 46px;width:46px;background: #fff;border-radius: 50%;}
.yuan2{height: 38px;width: 38px;background: yellow;border-radius: 50%;}	

.active{color:#fe5656}
</style>